<template>
  <el-container>
  <el-header>
   <span style="position:relative;right:-100px">出库机自助服务系统</span>
    <el-button style="position:relative;right:-500px" @click="handleExit" >退出登录</el-button>
  </el-header>
  <el-container class="aside">
    <el-aside width="200px">
           <el-menu
           default-active="/home/notice"
      text-color="#5b5b66"
      :router='true'
      :unique-opened='true'
    >
      <el-submenu :index="index+''" v-for='(item,index) in menulist' :key="index" >
        <template slot="title">
          <i class="el-icon-location"></i>
          <span>{{item.authName}}</span>
        </template>
          <el-menu-item :index="'/home/'+itemren.path" v-for='itemren in item.children' :key='itemren.id'>
            {{itemren.authName}}
          </el-menu-item>
      </el-submenu>
           </el-menu>
    </el-aside>
    <el-main>
      <router-view></router-view>
    </el-main>
  </el-container>
</el-container>
</template>

<script>
import {getLeftMenus} from 'network/axios.js'
import { mapMutations } from 'vuex'
export default {
      name:'Home',
      data(){
        return{
             menulist:[]
        } 
      },
      created(){
        getLeftMenus().then(res=>{
               this.menulist=res.data.data
               console.log(res);
        })
      },
      methods: {
        ...mapMutations(['delToken']),
        handleExit () { 
          this.delToken()
          this.$router.replace('/login')
          this.$message.success('退出成功')
        }
      }
}
</script>

<style>
     .el-header{
       background-image: linear-gradient(to top, #fad0c4 0%, #fad0c4 1%, #ffd1ff 100%);
            font-size: 20px;
          line-height: 60px;
          letter-spacing: 10px;
          color: #fff;
          text-align: center;

     }
     .el-menu{
       border: unset;
       background-color: unset;
     }
     .el-aside{
       background-image: linear-gradient(to top, #d9afd9 0%, #97d9e1 100%);
        height: 100%;
     }
     .el-container{
       height: 100%;
     }
   
</style>